<script lang="ts" setup>
import { reactive } from "vue";
import { ReturnTree } from "@whjxtech/jxtech-component";
import UnitTree from "./unit-tree.vue";

const emit = defineEmits<{
  (e: "node-click", row: ReturnTree<any>, column: any, event: Event): void; //行点击事件
}>();

const UnitTreeCardState = reactive({
  /**节点点击事件 */
  handleNodeClick: (treeData: ReturnTree<any>, column: any, event: Event) => {
    emit("node-click", treeData, column, event);
  },
  RefreshHandler: () => {
    console.log("刷新");
  }
});
defineExpose({
  ExposeRefresh: () => UnitTreeCardState.RefreshHandler()
});
</script>
<template>
  <el-card class="vms-org-unit-tree-card">
    <template #header>
      <span class="vms-org-unit-card-title">组织部门树</span>
    </template>
    <unit-tree @node-click="UnitTreeCardState.handleNodeClick" class="vms-org-unit-tree">
      <template #default="{ row, node }">
        <slot :row="row" :node="node"></slot>
      </template>
    </unit-tree>
  </el-card>
</template>
<style scoped lang="scss">
/** 对应卡片标题与 分页表格头部标题大小 */
.vms-org-unit-card-title {
  height: 100%;
  display: inline-block;
  min-height: 35px;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
}

.vms-org-unit-tree-card {
  height: 100%;
  // resize: horizontal;
  position: relative;
  z-index: 999;

  :deep(.el-card__header) {
    background-color: rgba(91, 162, 223, 0.5);

    .jxtech-card-title {
      color: #003876;
      font-size: 19px;
    }
  }
  :deep(.el-card__body) {
    padding: 20px;
    height: calc(100% - 54px);
    box-sizing: border-box;
  }
}

.vms-org-unit-tree {
  height: 100%;
  overflow: auto;
}
</style>
